<template>
	<div id="platformIndex">
		<el-form ref="platformDataForm" :rules="platformDataFormRules" :model="platformData" label-width="100px">
			<el-divider content-position="left">后端平台信息设置</el-divider>
			<el-form-item label="平台名称" prop="name"><el-input show-word-limit v-model="platformData.name" placeholder="请输入平台名称" maxlength="20"></el-input></el-form-item>
			<el-form-item label="平台副标题" prop="subName">
				<el-input show-word-limit v-model="platformData.subName" placeholder="请输入副标题" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="平台英文名" prop="enName">
				<el-input show-word-limit v-model="platformData.enName" placeholder="请输入平台英文名" maxlength="80"></el-input>
			</el-form-item>
			<el-form-item label="版权文字" prop="coypRightText">
				<el-input
					show-word-limit
					maxlength="150"
					type="textarea"
					:autosize="{ minRows: 2, maxRows: 4 }"
					placeholder="描述版权信息"
					v-model="platformData.coypRightText"
				></el-input>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="平台-主LOGO" prop="iconFileID">
						<gd_file :fileID="platformData.iconFileID" @uploadSuccess="mainUpload" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="平台-副LOGO" prop="iconFileID">
						<gd_file :fileID="platformData.iconSubFileID" @uploadSuccess="subUpload" />
					</el-form-item>
				</el-col>
			</el-row>

			<el-divider content-position="left">B端-移动端信息</el-divider>
			<el-row>
				<el-col :span="8">
					<el-form-item label="名字" prop="appBName">
						<el-input show-word-limit v-model="platformData.appBName" placeholder="请输入B端移动端-平台名字" maxlength="20"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="英文名字" prop="appBEnName">
						<el-input show-word-limit v-model="platformData.appBEnName" placeholder="请输入B端移动端-平台英文名字" maxlength="80"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="副标题" prop="appBSubName">
						<el-input show-word-limit v-model="platformData.appBSubName" placeholder="请输入B端移动端-平台副标题(广告词)" maxlength="20"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-divider content-position="left">C端-移动端信息</el-divider>
			<el-row>
				<el-col :span="8">
					<el-form-item label="名字" prop="appCName">
						<el-input show-word-limit v-model="platformData.appCName" placeholder="请输入B端移动端-平台名字" maxlength="20"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="英文名字" prop="appCEnName">
						<el-input show-word-limit v-model="platformData.appCEnName" placeholder="请输入B端移动端-平台英文名字" maxlength="80"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="副标题" prop="appCSubName">
						<el-input show-word-limit v-model="platformData.appCSubName" placeholder="请输入B端移动端-平台副标题(广告词)" maxlength="20"></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<!-- 按钮组 -->
			<el-form-item><el-button type="primary" @click="submitData" :loading="formLoading">确认修改</el-button></el-form-item>
		</el-form>
	</div>
</template>

<script>
import * as axiosAPI from '@/api/platform.js';
import gd_file from "@/components/mycomponents/gd_file.vue";
export default {
	name: 'platformIndex',
    components:{gd_file},
	data() {
		return {
			//平台信息数据
			platformData: {
				platformID: '101',
				name: null,
				subName: null,
				enName: null,
				iconFileID: null,
				iconFileURL: null,
				iconSubFileID: null,
				iconSubFileURL: null,
				coypRightText: null,
				appBName: null,
				appBEnName: null,
				appBSubName: null,
				appCName: null,
				appCEnName: null,
				appCSubName: null
			},
			//表单校验
			platformDataFormRules: {},
			//加载值
			formLoading: null,
			//组件key
			keys:null
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		//获取平台数据
		getData() {
			let _this = this;
			axiosAPI.getData()
				.then(function(res) {
					if(res.code == "0000"){
						_this.platformData = res.data;
						console.dir(res.data);
						_this.keys = new Date().getTime();
						
					}
				});
		},
		//提交修改
		submitData() {
			this.formLoading = true;
			let _this = this;
            axiosAPI.update(_this.platformData)
			  .then(function (response) {
			    if(response.code=="0000"){
						_this.formLoading = false;
				}else{
					_this.formLoading = false;
				}
			  });
		},
        // 主图上传成功
        mainUpload(data) {
            if (data.length > 0) {
                this.platformData.iconFileID = data[0].id;
                this.platformData.iconFileURL = data[0].url;
            } else {
                this.platformData.iconFileID = null;
                this.platformData.iconFileURL = null;
            }
        },
        // 副图上传成功
        subUpload(data) {
            if (data.length > 0) {
                this.platformData.iconSubFileID = data[0].id;
                this.platformData.iconSubFileURL = data[0].url;
            } else {
                this.platformData.iconSubFileID = null;
                this.platformData.iconSubFileURL = null;
            }
        },
	}
};
</script>

<style scoped>
.avatar {
	width: 100%;
	height: 100%;
}
</style>
